import { Modal, StyleSheet, View } from 'react-native';

interface BasicModalProps {
  isVisible: boolean;
  onClose: () => void;
  title: string;
  content: string;
  footerItems: { text: string; onPress: () => void }[];
  style?: any; // 如果有额外的样式需求
}

const BasicModal: React.FC<BasicModalProps> = ({
  isVisible,
  onClose,
  title,
  content,
  footerItems,
  style,
}) => {
  return (
    <Modal
      visible={isVisible}
      onRequestClose={onClose}
      animationType="fade" // 调整动画类型以实现淡入淡出效果
      transparent={true} // 使背景透明，内容居中显示
      style={{ justifyContent: 'center', alignItems: 'center' }} // 整体居中布局
    >
      <View style={[styles.modalContainer, style]}>
        <View style={styles.modalContent}>
          <Text style={styles.modalTitle}>{title}</Text>
          <Text style={styles.modalContentText}>{content}</Text>
          <View style={styles.modalFooter}>
            {footerItems.map((item, index) => (
              <TouchableOpacity
                key={index}
                style={styles.modalFooterButton}
                onPress={item.onPress}
              >
                <Text style={styles.modalFooterButtonText}>{item.text}</Text>
              </TouchableOpacity>
            ))}
          </View>
        </View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  modalContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.5)', // 半透明黑色背景
  },
  modalContent: {
    backgroundColor: 'white',
    borderRadius: 10,
    padding: 20,
    width: '80%', // 自定义宽度，可以根据需要调整
  },
  modalTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 10,
  },
  modalContentText: {
    fontSize: 16,
    color: '#666',
    textAlign: 'center',
    marginBottom: 15,
  },
  modalFooter: {
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
  modalFooterButton: {
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 5,
    backgroundColor: '#f0f0f0',
  },
  modalFooterButtonText: {
    fontSize: 16,
    color: '#333',
  },
});

export default BasicModal;